<template>
  <div class="dashboard">
    <div class="head__body">
      <el-select v-model="topQuery.scope" placeholder="请选择" size="small" @change="getCustomerOverview">
        <el-option label="个人数据" value="0"></el-option>
        <el-option label="个人及下属" value="1"></el-option>
      </el-select>
      <el-select v-model="topQuery.range" placeholder="请选择" size="small" @change="getCustomerOverview">
        <el-option label="今天" value="today"></el-option>
        <el-option label="本周" value="week"></el-option>
        <el-option label="本月" value="month"></el-option>
        <el-option label="本季度" value="season"></el-option>
      </el-select>
    </div>
    <el-row :gutter="20" class="content_top">
      <el-col :span="6">
        <el-card>
          <div class="title">新增线索</div>
          <div class="echart">
            <div class="echart_l">{{ topData.cc.current }}</div>
            <div class="echart_r">
              <img src="../../../assets/images/zzt.png" alt="">
            </div>
          </div>
          <div class="content_bottom">
            <span>{{ topRateText }}</span> <span style="color:#00a870; padding-left:8px">{{ ccRate }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="title">新增意向客户</div>
          <div class="echart">
            <div class="echart_l">{{ topData.ic.current }}</div>
            <div class="echart_r">
              <img src="../../../assets/images/zzt.png" alt="">
            </div>
          </div>
          <div class="content_bottom">
            <span>{{ topRateText }}</span> <span style="color:#00a870; padding-left:8px"> {{ icRate }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="title">新增签约客户</div>
          <div class="echart">
            <div class="echart_l">{{ topData.sc.current }}</div>
            <div class="echart_r">
              <img src="../../../assets/images/zzt.png" alt="">
            </div>
          </div>
          <div class="content_bottom">
            <span>{{ topRateText }}</span> <span style="color:#00a870; padding-left:8px">{{ scRate }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="9">
        <el-card>
          <div class="card-title">
            <div class="card-title-left">呼叫时长</div>
            <div class="card-title-right">
              <el-select v-model="charts.callDuration.query.range" placeholder="请选择" size="small" style="width: 150px" @change="getCallLogDurationOverview">
                <el-option label="一周内" :value="7"></el-option>
                <el-option label="30天内" :value="30"></el-option>
              </el-select>
            </div>
          </div>
          <div ref="callDurationCharts" style="width:100%;height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card>
          <div class="card-title">
            <div class="card-title-left">呼叫次数</div>
            <div class="card-title-right">
              <el-select v-model="charts.callNumber.query.range" placeholder="请选择" size="small" style="width: 150px" @change="getCallLogNumberOverview">
                <el-option label="一周内" :value="7"></el-option>
                <el-option label="30天内" :value="30"></el-option>
              </el-select>
            </div>
          </div>
          <div ref="callNumberCharts" style="width:100%;height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">
            <div class="card-title-left">接通率</div>
            <div class="card-title-right">
              <el-select v-model="charts.callRate.query.range" placeholder="请选择" size="small" style="width: 150px" @change="getCallLogConnRateOverview">
                <el-option label="一周内" :value="7"></el-option>
                <el-option label="30天内" :value="30"></el-option>
              </el-select>
            </div>
          </div>
          <div ref="callRateCharts" style="width:100%;height: 280px;margin-top: 20px"></div>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="18">-->
    <!--        <el-card>-->
    <!--          <div class="card-title">-->
    <!--            <div class="card-title-left">客户遗忘提醒</div>-->
    <!--            <div class="card-title-right"></div>-->
    <!--          </div>-->

    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import echarts from "echarts";
import { getCustomerOverview, getCallLogDurationOverview, getCallLogNumberOverview, getCallLogConnRateOverview } from "@/api/crm/dashboard";

export default {
  name: "CrmDashboard",
  data() {
    return {
      topQuery: {
        scope: "0",
        range: "today"
      },
      topData: {
        cc: { current: 0, last: 0 },
        ic: { current: 0, last: 0 },
        sc: { current: 0, last: 0 }
      },
      charts: {
        callDuration: {
          query: { range: 7 },
          el: null,
          option: {
            title: {
              show: false,
              text: "1111"
            },
            xAxis: {
              type: "category",
              data: []
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter(value) {
                  return (value / 60).toFixed(0);
                }
              }
            },
            tooltip: {
              trigger: "axis",
              formatter(params) {
                const { value, marker, axisValue } = params[0];
                let label = "";
                if (value < 60) {
                  label = value + " 秒";
                } else {
                  label = (value / 60).toFixed(0) + " 分钟";
                }
                return `${axisValue} <br/> ${marker} ${label} `;
              }
            },
            series: [
              {
                data: [],
                type: "line",
                smooth: true,
                symbol: "none"
              }
            ]
          }
        },
        callNumber: {
          query: { range: 7 },
          el: null,
          option: {
            tooltip: {
              trigger: "axis"
            },
            xAxis: {
              type: "category",
              data: []
            },
            yAxis: {
              type: "value"
            },
            series: [
              {
                name: "接通次数",
                data: [],
                type: "bar",
                stack: "total",
                label: {
                  show: true
                }
              },
              {
                name: "未接通次数",
                data: [],
                type: "bar",
                stack: "total",
                label: {
                  show: true
                }
              }
            ]
          }
        },
        callRate: {
          query: { range: 7 },
          el: null,
          option: {
            tooltip: {
              trigger: "item"
            },
            legend: {
              top: "4%",
              left: "center"

            },
            series: [
              {
                name: "接通率",
                type: "pie",
                radius: ["40%", "60%"],
                avoidLabelOverlap: false,
                labelLine: {
                  show: false
                },
                data: [
                  {
                    name: "已接通",
                    value: 0,
                    label: {
                      show: true,
                      position: "center",
                      fontSize: "16",
                      fontWeight: "bold",
                      formatter: "{d}%"
                    }
                  },
                  {
                    name: "未接通",
                    value: 0,
                    label: {
                      show: false
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    };
  },
  computed: {
    ccRate() {
      if (this.topData.cc.last === 0) {
        return "-";
      }
      const last = this.topData.cc.last === 0 ? 1 : this.topData.cc.last;
      const rate = (this.topData.cc.current - this.topData.cc.last) / last * 100;
      return rate.toFixed(2) + "%";
    },
    icRate() {
      if (this.topData.ic.last === 0) {
        return "-";
      }
      const last = this.topData.ic.last === 0 ? 1 : this.topData.ic.last;
      const rate = (this.topData.ic.current - this.topData.ic.last) / last * 100;
      return rate.toFixed(2) + "%";
    },
    scRate() {
      if (this.topData.sc.last === 0) {
        return "-";
      }
      const last = this.topData.sc.last === 0 ? 1 : this.topData.sc.last;
      const rate = (this.topData.sc.current - this.topData.sc.last) / last * 100;
      return rate.toFixed(2) + "%";
    },
    topRateText() {
      const range = this.topQuery.range;
      if (range === "today") {
        return "较昨天";
      } else if (range === "week") {
        return "较上周";
      } else if (range === "month") {
        return "较上月";
      } else if (range === "season") {
        return "较上季度";
      }
      return "较昨天";
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    init() {
      this.getCustomerOverview();
      // this.getCallLogDurationOverview(this.charts.callNumber.query);
      // this.getCallLogDurationOverview(this.charts.callRate.query);
    },
    initEcharts() {
      this.bulidEcharts("callDurationCharts");
      this.bulidEcharts("callNumberCharts");
      this.bulidEcharts("callRateCharts");
    },
    bulidEcharts(ref) {
      if (ref === "callDurationCharts") {
        this.charts.callDuration.el = echarts.init(this.$refs[ref], "default");
        this.charts.callDuration.el.setOption(this.charts.callDuration.option);
        this.getCallLogDurationOverview();
      } else if (ref === "callNumberCharts") {
        this.charts.callNumber.el = echarts.init(this.$refs[ref], "default");
        this.charts.callNumber.el.setOption(this.charts.callNumber.option);
        this.getCallLogNumberOverview();
      } else if (ref === "callRateCharts") {
        this.charts.callRate.el = echarts.init(this.$refs[ref], "default");
        this.charts.callRate.el.setOption(this.charts.callRate.option);
        this.getCallLogConnRateOverview();
      }
    },
    getCustomerOverview() {
      getCustomerOverview(this.topQuery).then(response => {
        if (response.code === 200) {
          this.topData = response.data;
        }
      });
    },
    // 通话时长
    getCallLogDurationOverview() {
      getCallLogDurationOverview(this.charts.callDuration.query).then(response => {
        if (response.code === 200) {
          const { time, items } = response.data;
          const { el, option } = this.charts.callDuration;
          option.xAxis.data = time;
          option.series[0].data = items;
          if (el != null) { el.setOption(option); }
        }
      });
    },
    // 呼叫次数
    getCallLogNumberOverview() {
      getCallLogNumberOverview(this.charts.callNumber.query).then(response => {
        if (response.code === 200) {
          const { axis_data, not_conn_count, conn_count } = response.data;
          const { el, option } = this.charts.callNumber;
          option.xAxis.data = axis_data;
          option.series[0].data = conn_count;
          option.series[1].data = not_conn_count;
          if (el != null) { el.setOption(option); }
        }
      });
    },
    // 接通率
    getCallLogConnRateOverview() {
      getCallLogConnRateOverview(this.charts.callRate.query).then(response => {
        if (response.code === 200) {
          const { not_conn_count, conn_count } = response.data;
          const { el, option } = this.charts.callRate;
          option.series[0].data[0].value = conn_count;
          option.series[0].data[1].value = not_conn_count;
          if (el != null) { el.setOption(option); }
        }
      });
    }

  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  margin: 0 20px;

  .el-row {
    margin-bottom: 20px;
  }

  .content_top {
    //display: flex;
    justify-content: space-between;

    ::v-deep .el-card.is-always-shadow {
      //flex: 1;
      //margin-right: 20px;
    }

    .el-card__body {
      padding: 24px 32px;
    }

    .title {
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
      color: #00000099;
      margin-bottom: 8px;
    }

    .echart {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .echart_l {
        line-height: 66px;
        font-size: 36px;
      }

      .echart_r {
        height: 44px;

        img {
          display: block;
          width: 100px;
          height: 66px;
        }
      }
    }
  }

  .content_bottom {
    font-size: 14px;
    font-weight: 500;
    color: #00000099;
    margin-top: 14px;
  }
}

.head__body {
  margin-bottom: 16px;

  .el-select {
    width: 195px !important;
    margin-right: 12px;
  }
}

.card-title{
  display: flex;
  .card-title-left {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    margin-left: 12px;
  }
  .card-title-right{
    flex-shrink: 0;
  }
}
</style>
